<template>
  <div class="tp-body">
    <!-- JGame Official Channel -->
    <div class="JGame-Official-Channel">
      <div>
        <h3>JGame Official Channel</h3>
        <p>join to Follow Latest News !</p>
      </div>
      <CRow>
          <!-- 1 -->
          <CCol class="body" :sm="12" :lg="12" style="margin-bottom: .5rem;">
            <div class="icon-tag col-4">
              <CIcon content="cib-twitter" size="xxl" />
              <span>Twitter</span>
            </div>
            <div class="icon-url col-8">
              <input type="text" id="inputCopy" style="opacity:0;position:absolute;">
              <p>https://twitter.com</p>
              <span @click="copyText('https://twitter.com')">Copy</span>
            </div>
          </CCol>
          <!-- 2 -->
          <CCol class="body" :sm="12" :lg="12" style="margin-bottom: .5rem;">
            <div class="icon-tag col-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xxl" viewBox="0 0 32 32" role="img">undefined<path d="M0 0v32h32v-32zM26.583 7.583l-1.714 1.646c-0.151 0.109-0.224 0.297-0.193 0.479v12.089c-0.031 0.188 0.042 0.37 0.193 0.484l1.672 1.646v0.359h-8.427v-0.359l1.734-1.688c0.172-0.172 0.172-0.219 0.172-0.479v-9.776l-4.828 12.26h-0.651l-5.62-12.26v8.219c-0.047 0.344 0.068 0.693 0.307 0.943l2.26 2.74v0.359h-6.401v-0.359l2.26-2.74c0.24-0.25 0.349-0.599 0.286-0.943v-9.5c0.031-0.266-0.073-0.526-0.271-0.703l-2.005-2.417v-0.365h6.229l4.818 10.568 4.234-10.568h5.943z"></path></svg>
              <span>Medium</span>
            </div>
            <div class="icon-url col-8">
              <input type="text" id="inputCopy" style="opacity:0;position:absolute;">
              <p>https://medium.com/@jgamedao</p>
              <span @click="copyText('https://Medium.com')">Copy</span>
            </div>
          </CCol>
          <!-- 3 -->
          <CCol class="body" :sm="12" :lg="12" style="margin-bottom: .5rem;">
            <div class="icon-tag col-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xxl" viewBox="0 0 32 32" role="img">undefined<path d="M16 0.5c-8.563 0-15.5 6.938-15.5 15.5s6.938 15.5 15.5 15.5c8.563 0 15.5-6.938 15.5-15.5s-6.938-15.5-15.5-15.5zM23.613 11.119l-2.544 11.988c-0.188 0.85-0.694 1.056-1.4 0.656l-3.875-2.856-1.869 1.8c-0.206 0.206-0.381 0.381-0.781 0.381l0.275-3.944 7.181-6.488c0.313-0.275-0.069-0.431-0.482-0.156l-8.875 5.587-3.825-1.194c-0.831-0.262-0.85-0.831 0.175-1.231l14.944-5.763c0.694-0.25 1.3 0.169 1.075 1.219z"></path></svg>
              <span>Telegram</span>
            </div>
            <div class="icon-url col-8">
              <input type="text" id="inputCopy" style="opacity:0;position:absolute;">
              <p>https://t.me/jgamedaoo</p>
              <span @click="copyText('https://t.me/jgamedaoo')">Copy</span>
            </div>
          </CCol>
          <!-- 4 -->
          <CCol class="body" :sm="12" :lg="12" style="margin-bottom: .5rem;">
            <div class="icon-tag col-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xxl" viewBox="0 0 32 32" role="img">undefined<path d="M26.964 0c1.875 0 3.385 1.516 3.474 3.302v28.698l-3.568-3.031-1.958-1.781-2.141-1.865 0.891 2.938h-18.714c-1.87 0-3.385-1.417-3.385-3.302v-21.651c0-1.786 1.516-3.302 3.391-3.302h22zM18.807 7.578h-0.042l-0.271 0.266c2.766 0.802 4.104 2.052 4.104 2.052-1.781-0.891-3.391-1.339-4.995-1.521-1.156-0.177-2.318-0.083-3.297 0h-0.271c-0.625 0-1.958 0.271-3.745 0.984-0.62 0.271-0.979 0.448-0.979 0.448s1.333-1.339 4.281-2.052l-0.182-0.177c0 0-2.229-0.089-4.635 1.693 0 0-2.406 4.193-2.406 9.359 0 0 1.333 2.318 4.99 2.406 0 0 0.536-0.708 1.073-1.333-2.052-0.625-2.854-1.875-2.854-1.875s0.182 0.089 0.448 0.266h0.078c0.042 0 0.063 0.021 0.083 0.042v0.010c0.021 0.021 0.042 0.036 0.078 0.036 0.443 0.182 0.88 0.359 1.24 0.536 0.625 0.266 1.422 0.536 2.401 0.714 1.24 0.182 2.661 0.266 4.281 0 0.797-0.182 1.599-0.354 2.401-0.714 0.516-0.266 1.156-0.531 1.859-0.984 0 0-0.797 1.25-2.938 1.875 0.438 0.62 1.057 1.333 1.057 1.333 3.661-0.083 5.083-2.401 5.161-2.302 0-5.161-2.422-9.359-2.422-9.359-2.177-1.62-4.219-1.682-4.578-1.682l0.073-0.026zM19.031 13.464c0.938 0 1.693 0.797 1.693 1.776 0 0.99-0.76 1.786-1.693 1.786-0.938 0-1.693-0.797-1.693-1.776 0-0.99 0.76-1.786 1.693-1.786zM12.974 13.464c0.932 0 1.688 0.797 1.688 1.776 0 0.99-0.76 1.786-1.693 1.786-0.938 0-1.698-0.797-1.698-1.776 0-0.99 0.76-1.786 1.698-1.786z"></path></svg>
              <span>Discord</span>
            </div>
            <div class="icon-url col-8">
              <input type="text" id="inputCopy" style="opacity:0;position:absolute;">
              <p>https://discord.com</p>
              <span @click="copyText('https://discord.com')">Copy</span>
            </div>
          </CCol>
          <!-- 5 -->
           <CCol class="body" :sm="12" :lg="12" style="margin-bottom: .5rem;">
            <div class="icon-tag col-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xxl" viewBox="0 0 32 32" role="img">undefined<path d="M12.594 19.094c-0.863 0-1.556-0.694-1.556-1.538 0-0.862 0.694-1.556 1.556-1.556 0.85 0 1.538 0.694 1.538 1.556 0 0.85-0.694 1.538-1.538 1.538zM31.5 16c0 8.563-6.938 15.5-15.5 15.5s-15.5-6.938-15.5-15.5c0-8.563 6.938-15.5 15.5-15.5s15.5 6.938 15.5 15.5zM23.231 13.425c-0.587 0-1.106 0.244-1.488 0.625-1.4-0.969-3.287-1.594-5.381-1.663l1.087-4.894 3.463 0.781c0 0.85 0.694 1.538 1.537 1.538 0.863 0 1.556-0.706 1.556-1.556s-0.694-1.556-1.556-1.556c-0.606 0-1.125 0.363-1.381 0.863l-3.825-0.85c-0.188-0.050-0.381 0.088-0.431 0.275l-1.194 5.4c-2.075 0.088-3.944 0.706-5.344 1.675-0.381-0.4-0.919-0.637-1.506-0.637-2.181 0-2.894 2.931-0.9 3.925-0.069 0.313-0.106 0.637-0.106 0.969 0 3.287 3.7 5.95 8.25 5.95 4.569 0 8.269-2.663 8.269-5.95 0-0.331-0.038-0.675-0.119-0.988 1.956-1 1.237-3.906-0.931-3.906zM18.925 20.688c-1.137 1.137-4.756 1.119-5.85 0-0.137-0.137-0.381-0.137-0.519 0-0.156 0.156-0.156 0.4 0 0.538 1.425 1.425 5.456 1.425 6.888 0 0.156-0.138 0.156-0.381 0-0.538-0.138-0.137-0.381-0.137-0.519 0zM19.406 16c-0.85 0-1.538 0.694-1.538 1.556 0 0.85 0.694 1.538 1.538 1.538 0.863 0 1.556-0.694 1.556-1.538 0-0.862-0.688-1.556-1.556-1.556z"></path></svg>
              <span>Reddit</span>
            </div>
            <div class="icon-url col-8">
              <input type="text" id="inputCopy" style="opacity:0;position:absolute;">
              <p>https://www.reddit.com/r/jgamedao/</p>
              <span @click="copyText('https://www.reddit.com/r/jgamedao/')">Copy</span>
            </div>
          </CCol>
          <!-- 6 -->
           <CCol class="body" :sm="12" :lg="12" style="margin-bottom: .5rem;">
            <div class="icon-tag col-4">
                <CIcon content="cib-youtube" size="xxl" />
                <span>Youtube</span>
            </div>
            <div class="icon-url col-8">
              <input type="text" id="inputCopy" style="opacity:0;position:absolute;">
              <p>https://www.youtube.com/channel/UChmFc2RuQfc17cUKwGWamyw</p> 
              <span @click="copyText('https://www.youtube.com/channel/UChmFc2RuQfc17cUKwGWamyw')">Copy</span>
            </div>
          </CCol>
      </CRow>
    </div>
    <!-- Multiling Telegram Community -->
    <div class="Multiling-Telegram-Community">
      <div>
        <h3>Multiling Telegram Community</h3>
        <p>Join Our Global Community </p>
      </div>
      <CRow>
          <CCol v-for="item in groupItems" key="item"  :sm="12" :lg="4">
            <div class="group-item">
              <div class="icon-tag">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xxl" viewBox="0 0 301 201" role="img">undefined<g fill="none"><path fill="#DE2910" d="M.5.5h300v200H.5z"></path><path fill="#FFDE00" d="M50.5 20.5l17.634 54.27-46.166-33.541h57.064L32.867 74.77zM91.925 25.645l12.488-14.348-1.67 18.948-9.786-16.31 17.505 7.443zM110.601 41.914l17.077-8.377-8.892 16.815-2.69-18.83 13.244 13.653zM110.885 67.753l19.009-.682-14.978 11.724 5.226-18.289 6.522 17.868zM92.691 84.253l17.798 6.711-18.343 5.032 11.882-14.853-.882 19z"></path></g></svg>
              </div>
              <div class="text">
                <strong>{{item.name}}</strong>
                <p>http://www.w3.org/2000/svg</p>
              </div>
            </div>
          </CCol>
      </CRow>
    </div>
  </div>
</template>

<script>
import { useI18n } from 'vue-i18n'
import { brandSet } from '@coreui/icons'
export default {
  name: 'Dashboard',
  components: {
  },
  setup() {
    const groupItems =[];
    for (let i = 0; i < 9; i++) {
      groupItems.push({
        name:'Group Item'
      })
      
    }
    const icons = brandSet;
    const i18n = useI18n();
    const copyText = (url)=>{
      const input = document.getElementById('inputCopy');
      input.value = url;
      input.select();
      document.execCommand('copy');
      input.blur();
      alert("Copy succeeded! Please paste in the browser.")
    }
    return {
        i18n,
        icons,
        copyText,
        groupItems
    }
  },
  methods: {
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/custom";

.JGame-Official-Channel {
  text-align: center;
  .body {
    text-align: left;
    display: flex;
    .icon-tag {
      display: flex;
      padding: 0.5rem .2rem;
      padding-left: 1rem;
      border-radius: 0.5rem;
      background-image: $info-btn;
      color: #fff;
      margin-right: .5rem;
      span {
        line-height: 2rem;
        padding-left: 0.2rem;
      }
    }
    .icon-url {
      padding: 0.8rem;
      border-radius: 0.5rem;
      color: #333;
      -webkit-box-shadow: $boxShadow;
      box-shadow: $boxShadow;
      background: #fff;
      margin: auto;
      display: flex;
      justify-content: space-between;
      p{
        max-width: 80%;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        margin-bottom: 0;
      }
      span {
        margin-left: .2rem;
        float: right;
        color: #6496e6;
      }
      #inputCopy {
        top: 0;
        left: 0;
      }
    }
  }
}

.Multiling-Telegram-Community {
  padding: 1rem;
  margin-top: 2rem;
  text-align: center;
  .group-item {
    margin-bottom: 1rem;
    padding: 0.8rem;
    border-radius: 0.5rem;
    color: #333;
    -webkit-box-shadow: $boxShadow;
    box-shadow: $boxShadow;
    background: #fff;
    display: flex;
    .icon-tag{
      border-radius: 180%;
      overflow: hidden;
      width: 3rem;
      height: 3rem;
      margin: .5rem;
      svg{
        width: 150%;
        height: 100%;
      }
    }
    .text{
      text-align: left;
      margin: auto;
      strong{
        font-size: 1.2rem;
      }
    }
  }
}
</style>
